<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="login.html">登陆</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="img/doge.jpg" class="avtar" alt="">
                <h3>比特小可爱</h3>
                <a href="http:www.github.com">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 博客时间 -->
                <div class="date">2021-06-02</div>
                <!-- 博客正文 -->
                <p>
                    从今天起我要好好敲代码.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem alias
                    ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor mollitia dolorum animi.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem alias
                    ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor mollitia dolorum animi.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem alias
                    ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor mollitia dolorum animi.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint accusantium, enim iste
                    corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere officiis iure velit. Blanditiis
                    pariatur delectus perferendis.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint accusantium, enim iste
                    corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere officiis iure velit. Blanditiis
                    pariatur delectus perferendis.
                </p>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed, laudantium suscipit exercitationem
                    eius repellat laboriosam voluptates, nisi magni esse nostrum obcaecati saepe veritatis, porro
                    pariatur explicabo! Debitis non possimus voluptatum.
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed, laudantium suscipit exercitationem
                    eius repellat laboriosam voluptates, nisi magni esse nostrum obcaecati saepe veritatis, porro
                    pariatur explicabo! Debitis non possimus voluptatum.
                </p>
            </div>
        </div>
    </div>

</body>

</html>